import React from 'react';
import {Table, Popconfirm, message,Icon, Button, Modal, Input, Form} from 'antd';

const FormItem = Form.Item;

class UserList extends React.Component {
  constructor(props){
    super(props);
    this.state ={
      ...props.users
    }
  }
  componentWillReceiveProps(nextProps) {
       this.setState({...nextProps.users});
   }
  columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },{
    title: '昵称',
    dataIndex: 'username',
    key: 'username'
  },{
    title: '邮箱地址',
    dataIndex: 'email',
    key: 'emial'
  },{
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone'
  },{
    title:'个人网站',
    dataIndex: 'website',
    key: 'website',
  },{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    render: (text, record) => (
    <div>
      <div style={{float: 'left',paddingRight: '8px', color: '#00bfff', cursor: 'pointer'}}>
        <Icon type='edit' onClick={() => this.editUser(record.id)}/>
      </div>
      <Popconfirm
        title='Are you sure to delete this People?'
        okText='Yes'
        cancelText='No'
        onConfirm={() => this.confirm(record.id)}
        onCancel={this.cancel}
      >
        <Icon type='delete' style={{color : 'red', cursor: 'pointer'}}></Icon>
      </Popconfirm>
    </div>
    )
  }]
  editUser(id){
    this.props.form.resetFields();
    this.props.dispatch({
      type: 'users/showItem',
      payload: id,
    })
  }
  confirm(id) {
      this.props.dispatch({
        type: 'users/remove',
        payload: id,
      })
      message.success('删除成功');
  }
  cancel(e) {
      console.log(e);
      message.error('Click on No');
  }
  showModal = () => {
    this.props.dispatch({type: 'users/modalShow', payload: {modalVisible: true,modalType: 'create', modalName: '', modalUserName: '', modalEmail: '', modalPhone: '', modalWebSite: '',}})
  }

  handleOk = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(this.state.modalType === 'create'){
          this.props.dispatch({type: 'users/add', payload: {...values}});
        }else if(this.state.modalType === 'update'){
          this.props.form.resetFields();
          this.props.dispatch({type: 'users/update', payload: {...values,id: this.state.id}});
        }
      }
    });
  }

  handleCancel = (e) => {
    this.props.dispatch({type: 'users/modalClose', payload: {}});
  }

  render(){
    const { getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol:{
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol:{
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    return(
      <div>

          <Button type='primary' onClick={this.showModal} style={{margin: '8px',float: 'right',position: 'relative', zIndex: '2'}}>添加用户</Button>
          <Table
            total={this.state.list.length}
            dataSource={this.state.list}
            columns={this.columns}
            size='middle'
            rowKey={record => record.id}
            pagination={{
              pageSize: 5,
              showQuickJumper: true,
            }}
          ></Table>
          <Modal
            title={this.state.modalType === 'create' ? '注册用户' : '编辑用户'}
            visible={this.state.modalVisible}
            footer = {false}
            onCancel={this.handleCancel}
          >
            <Form onSubmit={this.handleOk}>
              <FormItem
                label="姓名"
                {...formItemLayout}
              >
                {getFieldDecorator('name',{initialValue: this.state.modalName,rules: [{required: true, message: 'Please input your Name!'}]})(
                  <Input placeholder="Please Input Your Name"/>
                )}
              </FormItem>
              <FormItem
                label="昵称"
                {...formItemLayout}
              >
                {getFieldDecorator('username',{initialValue: this.state.modalUserName,rules: [{required: true, message: 'Please input you UserName!'}]})(
                  <Input placeholder="Please Input Your UserName" />
                )}
              </FormItem>
              <FormItem
                label="邮箱"
                {...formItemLayout}
              >
              {getFieldDecorator('email',{initialValue: this.state.modalEmail,rules: [{type: 'email', message: 'The input is not valid Email!'},{required: true, message: 'Please input your Email!'}]})(
                <Input placeholder="Please Input Your Email" />
              )}
              </FormItem>
              <FormItem
                label="手机"
                {...formItemLayout}
              >
                {getFieldDecorator('phone',{initialValue: this.state.modalPhone,rules: [{required: true, message: 'Please input your Phone Number!'}]})(
                  <Input placeholder="Please Input Your phone" />
                )}
              </FormItem>
              <FormItem
                label="个人站点"
                {...formItemLayout}
              >
                {getFieldDecorator('website',{initialValue: this.state.modalWebSite,rules: [{required: true, message: 'Please input your WebSite!'}]})(
                  <Input placeholder="Please Input Your website" />
                )}
              </FormItem>
              <FormItem style={{borderTop: '1px solid #e8e8e8', paddingTop: '10px'}}>
                <Button type="primary" style={{float: 'right', marginLeft: '10px'}}htmlType="submit">添加</Button>
                <Button type="default"  style={{float: 'right'}}onClick={this.handleCancel}>取消</Button>
              </FormItem>
            </Form>
          </Modal>
      </div>
    )
  }
}
const WrappedUserList = Form.create()(UserList);
export default WrappedUserList;
